<template>
  <view class="min-h-screen bg-[#f7f8fa] flex flex-col px-4">
    <!-- 地址编辑卡片 -->
    <view
      class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4 flex flex-col gap-3"
    >
      <view class="flex flex-col gap-3">
        <wd-input
          label="收货人"
          label-width="90px"
          prop="name"
          clearable
          v-model="formData.name"
          placeholder="请输入收货人姓名"
          :rules="[{ required: true, message: '请输入收货人姓名' }]"
        />
        <wd-input
          label="手机号"
          label-width="90px"
          prop="phone"
          type="number"
          maxlength="11"
          clearable
          v-model="formData.phone"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请输入手机号' }]"
        />
        <wd-input
          label="所在地区"
          label-width="90px"
          prop="region"
          readonly
          placeholder="点击选择地址"
          v-model="formData.region"
          @click="chooseLocation"
          suffix-icon="location"
          :rules="[{ required: true, message: '请选择地址' }]"
        />
        <wd-textarea
          label="详细地址"
          label-width="90px"
          prop="detail"
          v-model="formData.detail"
          placeholder="请输入详细门牌号"
          rows="2"
          :rules="[{ required: true, message: '请输入详细地址' }]"
        />
      </view>
    </view>

    <!-- 默认地址切换 -->
    <view
      class="flex items-center justify-between bg-white rounded-2xl border border-gray-200 px-2"
    >
      <text class="text-gray-700 text-sm">设为默认地址</text>
      <switch
        color="#007aff"
        :checked="formData.isDefault"
        @change="(e: any) => (formData.isDefault = e?.detail?.value || false)"
      />
    </view>

    <!-- 提交按钮 -->
    <view class="mt-auto">
      <wd-button type="primary" size="large" block @click="handleSubmit">
        保存地址
      </wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { addAddress, getAddressDetail, updateAddress } from '@/api/address'
import { onLoad } from '@dcloudio/uni-app'

const isadd = ref()

// 表单数据
const formData = reactive({
  name: '',
  phone: '',
  region: '',
  detail: '',
  isDefault: false,
  latitude: 0,
  longitude: 0
})

// 从地图选择地址
function chooseLocation() {
  uni.chooseLocation({
    success: (res) => {
      formData.region = res.name || ''
      formData.latitude = res.latitude
      formData.longitude = res.longitude
    },
    fail: () => {
      uni.showToast({ title: '无法打开地图选择' })
    }
  })
}

// 表单提交
async function handleSubmit() {
  if (
    !formData.name ||
    !formData.phone ||
    !formData.region ||
    !formData.detail
  ) {
    uni.showToast({ title: '请完整填写所有必填项' })
    return
  }
  if (isadd.value) {
    const res = await updateAddress<any, UserAddress>({
      id: isadd.value,
      name: formData.name,
      phone: formData.phone,
      location: formData.region,
      address_detail: formData.detail,
      is_default: formData.isDefault
    })
    if (res.code === 200) {
      uni.showToast({ title: '保存成功' })
    }
  } else {
    const res = await addAddress<any, UserAddress>({
      user_id: uni.getStorageSync('user').id,
      name: formData.name,
      phone: formData.phone,
      location: formData.region,
      address_detail: formData.detail,
      is_default: formData.isDefault
    })
    if (res.code === 200) {
      uni.showToast({ title: '保存成功' })
    }
  }
}

// 页面加载时获取地址详情
onLoad(async (options: any) => {
  if (options.id) {
    isadd.value = options.id
    const res = await getAddressDetail<any, UserAddress>({
      id: options.id
    })
    if (res.code === 200) {
      formData.name = res.data.name || ''
      formData.phone = res.data.phone || ''
      formData.region = res.data.location || ''
      formData.detail = res.data.address_detail || ''
      formData.isDefault = res.data.is_default === 1
    }
  }
})
</script>

<style lang="scss" scoped>
:deep(.wd-input__input),
:deep(.wd-textarea__inner) {
  font-size: 14px;
  color: #333;
}
:deep(.wd-button) {
  background-color: #4caf50 !important;
}
</style>
